<template>
  <div class="chat-panel center-input-layout">
    <div class="chat-title">
      <span class="chat-logo">🚚</span>
      智能物流助手
      <div class="chat-subtitle">让物流沟通更高效</div>
      <div class="wave-divider"></div>
    </div>
    <div class="center-content">
      <div class="message-panel glass-bg" id="message-panel">
        <div class="message-list">
          <template v-if="messageList.length === 0">
            <div class="no-message">
              <img :src="nishuowotingzhe" class="no-msg-img" />
              <div class="no-msg-tip">欢迎咨询物流、快递、配送等相关问题~ 来吧你说我听着!</div>
            </div>
          </template>
          <transition-group name="fade-bubble" tag="div">
            <div
              v-for="(item, index) in messageList"
              :key="'item' + index"
              :class="['message-item', item.type == 1 ? 'ai-item' : 'user-item']"
            >
              <template v-if="item.type == 0">
                <div class="user-icon user-avatar">👨‍✈️</div>
                <div class="message-content user-bubble">
                  <div class="content-inner user-gradient">{{ item.content }}</div>
                </div>
              </template>
              <template v-else>
                <div class="user-icon ai-avatar">🤖</div>
                <div class="message-content ai-bubble">
                  <div class="content-inner ai-gradient">
                    <MdPreview
                      previewTheme="vuepress"
                      :codeFoldable="false"
                      editorId="preview"
                      :modelValue="item.content.join('')"
                    />
                    <div class="loading" v-if="item.loading">
                      <img src="../assets/loading.gif" />
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </transition-group>
        </div>
      </div>
      <div class="send-panel glass-bg enhanced-input-panel">
        <el-form :model="formData" ref="formDataRef" @submit.prevent>
          <el-form-item label="模型">
            <el-select clearable placeholder="选择想要的模型" v-model="formData.model">
              <el-option value="deepseek-r1:1.5b" label="deepseek-r1:1.5b"></el-option>
              <el-option value="4.0Ultra" label="科大讯飞"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="content">
            <el-input
              type="textarea"
              :rows="3"
              clearable
              placeholder="老铁说出请输入你的问题"
              v-model="formData.content"
              @keyup="keySend"
              class="input-glass enhanced-input"
              :class="{ 'is-focused': isInputFocused, 'is-filled': formData.content }"
              @focus="isInputFocused = true"
              @blur="isInputFocused = false"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="" class="send-btn">
            <el-button class="send-button enhanced-send-btn" type="primary" @click="sendMessage" :disabled="loading">
              <span class="send-icon" :class="{ 'loading-spin': loading }">🚚</span> 发送(ctrl+enter)
            </el-button>
          </el-form-item>
        </el-form>
        <div class="input-bottom-glow"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import nishuowotingzhe from '@/assets/Ai/你说我听着.jpg'

import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
} from "vue";
const { proxy } = getCurrentInstance();
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/style.css";

const formData = ref({
  model: "欢迎使用",
});
const messageList = ref([]);
const loading = ref(false);
const isInputFocused = ref(false);

const keySend = (event) => {
  if (!(event.ctrlKey && event.key === "Enter")) {
    return;
  }
  sendMessage();
};

const sendMessage = () => {
  const message = formData.value.content;
  if (!message) {
    ElMessage({
      type: "warning",
      message: "请输入内容",
      duration: 2000,
    });
    return;
  }
  messageList.value.push({
    type: 0,
    content: message,
  });

  messageList.value.push({
    type: 1,
    content: [],
    loading: true,
  });
  loading.value = true;

  const eventSource = new EventSource(
    `/api/stream?model=${formData.value.model}&message=${message}`
  );
  formData.value.content = "";
  eventSource.onmessage = (event) => {
    let response = event.data;
    console.log(response);
    if (response == "end") {
      close();
      return;
    }
    response = JSON.parse(response).content;
    messageList.value[messageList.value.length - 1].content.push(response);
    //滚动到底部
    nextTick(() => {
      const content = document.getElementById("message-panel");
      content.scrollTop = content.scrollHeight;
    });
  };

  eventSource.onerror = (error) => {
    close();
  };

  const close = () => {
    eventSource.close();
    messageList.value[messageList.value.length - 1].loading = false;
    loading.value = false;
  };
};
</script>

<style lang="scss" scoped>
@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
// 浅蓝色主题变量
$main-blue: #e3f0fc;
$blue-gradient: linear-gradient(90deg, #7ecbff 0%, #b3e5fc 100%);
$blue-gradient-dark: linear-gradient(90deg, #4fc3f7 0%, #0288d1 100%);
$blue-border: #b3e5fc;
$blue-shadow: 0 2px 16px #7ecbff33;

.chat-panel {
  background: $main-blue;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  .chat-title {
    width: 100vw;
    background: $blue-gradient-dark;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 24px 0 10px 0;
    margin-bottom: 0px;
    box-shadow: 0 2px 8px rgba(100, 1, 143, 0.08);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    position: relative;
    overflow: hidden;
    .chat-logo {
      font-size: 32px;
      margin-right: 12px;
      vertical-align: middle;
    }
    .chat-subtitle {
      font-size: 14px;
      font-weight: 400;
      margin-top: 6px;
      opacity: 0.85;
      letter-spacing: 1px;
      text-shadow: 0 2px 8px rgba(100, 1, 143, 0.08);
    }
    .wave-divider {
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 32px;
      //background: url('https://cdn.jsdelivr.net/gh/duogongneng/testcdn/img/wave.svg') repeat-x;
      background-size: contain;
      z-index: 2;
      pointer-events: none;
    }
  }
  .glass-bg {
    background: rgba(255,255,255,0.8);
    box-shadow: $blue-shadow;
    backdrop-filter: blur(8px);
    border-radius: 18px;
  }
  .message-panel {
    flex: 1;
    width: 100vw;
    display: flex;
    justify-content: center;
    //background: url('https://cdn.jsdelivr.net/gh/duogongneng/testcdn/img/logistics-bg.svg') center 120px no-repeat, $main-blue;
    background-size: 400px, cover;
    overflow-y: auto;
    .message-list {
      margin: 0px auto;
      width: 100%;
      max-width: 700px;
      padding: 24px 0 12px 0;
      min-height: 300px;
      .no-message {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        .no-msg-img {
          width: 320px;
          max-width: 90vw;
          display: block;
          margin: 0 auto;
          border-radius: 18px;
          box-shadow: 0 4px 24px #6a82fb22;
          transition: width 0.3s;
        }
        .no-msg-tip {
          color: #888;
          font-size: 18px;
          margin-top: 18px;
        }
      }
      .message-item {
        margin: 18px 0px;
        display: flex;
        align-items: flex-end;
        transition: background 0.3s;
        animation: fadeIn 0.5s;
        .user-icon {
          width: 48px;
          height: 48px;
          line-height: 48px;
          border-radius: 50%;
          background: #fff;
          color: #6a82fb;
          text-align: center;
          font-size: 26px;
          margin: 0 12px;
          box-shadow: 0 2px 8px rgba(100, 1, 143, 0.08);
          border: 2px solid #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .ai-avatar {
          background: #fc5c7d;
          color: #fff;
          border: 2px solid #fc5c7d;
        }
        .user-avatar {
          background: #6a82fb;
          color: #fff;
          border: 2px solid #6a82fb;
        }
        .message-content {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          max-width: 70%;
        }
        .content-inner {
          border-radius: 18px 18px 4px 18px;
          padding: 14px 18px;
          color: #fff;
          font-size: 16px;
          box-shadow: 0 2px 8px rgba(106, 130, 251, 0.08);
          min-width: 60px;
          min-height: 32px;
          word-break: break-word;
          background: $blue-gradient;
          opacity: 0.98;
        }
        .user-gradient {
          background: $blue-gradient;
          animation: gradient-move 2s linear infinite alternate;
        }
        .ai-gradient {
          background: $blue-gradient-dark;
          animation: gradient-move 2s linear infinite alternate;
        }
      }
      .ai-item {
        flex-direction: row-reverse;
        .ai-bubble {
          justify-content: flex-start;
        }
        .content-inner,
        :deep(.md-editor-previewOnly) {
          background: $blue-gradient-dark;
          color: #fff;
          border-radius: 18px 18px 18px 4px;
          box-shadow: 0 2px 12px rgba(252, 92, 125, 0.08);
          animation: gradient-move 2s linear infinite alternate;
        }
        .ai-avatar {
          margin-left: 12px;
          margin-right: 0;
        }
        .loading {
          text-align: center;
        }
      }
      .user-item {
        .user-bubble {
          justify-content: flex-end;
        }
      }
    }
    /* 滚动条美化 */
    &::-webkit-scrollbar {
      width: 8px;
      background: rgba(200,200,200,0.1);
    }
    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%);
      border-radius: 8px;
    }
  }
  .send-panel {
    width: 100vw;
    max-width: 700px;
    margin: 0 auto 24px auto;
    background: rgba(255,255,255,0.8);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(106, 130, 251, 0.08);
    padding: 18px 24px 10px 24px;
    .send-btn {
      text-align: right;
      margin-bottom: 0px;
      padding: 5px;
      :deep(.el-form-item__content) {
        justify-content: flex-end;
      }
    }
    :deep(.el-textarea__inner) {
      border: 0 !important;
      resize: none !important;
      box-shadow: none;
      border-radius: 12px;
      background: rgba(245,247,250,0.8);
      font-size: 16px;
      padding: 10px 14px;
      border: 2px solid transparent;
      transition: border 0.3s, box-shadow 0.3s;
    }
    :deep(.el-textarea__inner:focus) {
      border: 2px solid #6a82fb !important;
      box-shadow: 0 0 8px #6a82fb33;
      background: #fff;
    }
    .send-button {
      font-size: 18px;
      padding: 8px 32px;
      border-radius: 24px;
      background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
      border: none;
      box-shadow: 0 2px 8px rgba(252, 92, 125, 0.08);
      transition: background 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      .send-icon {
        margin-right: 8px;
        font-size: 20px;
        vertical-align: middle;
      }
    }
    .send-button:active {
      background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
      box-shadow: 0 4px 16px rgba(252, 92, 125, 0.16);
    }
    .send-button::after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      background: rgba(255,255,255,0.3);
      border-radius: 100%;
      transform: translate(-50%, -50%);
      transition: width 0.3s, height 0.3s;
      z-index: 1;
    }
    .send-button:active::after {
      width: 120px;
      height: 120px;
      transition: width 0.3s, height 0.3s;
    }
  }
}
.fade-bubble-enter-active, .fade-bubble-leave-active {
  transition: all 0.5s cubic-bezier(.55,0,.1,1);
}
.fade-bubble-enter-from, .fade-bubble-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
@media (max-width: 800px) {
  .chat-panel .message-panel .message-list,
  .chat-panel .send-panel {
    max-width: 98vw;
    width: 98vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .chat-panel .chat-title {
    font-size: 20px;
    padding: 16px 0 12px 0;
  }
  .chat-panel .send-panel {
    padding: 10px 4vw 6px 4vw;
  }
  .chat-panel .message-panel {
    background-size: 220px, cover;
  }
}
.no-data {
  text-align: center;
  color: #5f5f5f;
}
.enhanced-input-panel {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(135deg, #fff 80%, #f5f7fa 100%), linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.10), 0 2px 16px rgba(106, 130, 251, 0.08);
  transition: box-shadow 0.3s, border 0.3s;
}
.enhanced-input-panel:focus-within {
  border: 2px solid #6a82fb;
  box-shadow: 0 0 16px #6a82fb33, 0 8px 32px 0 rgba(31,38,135,0.10);
}
.input-bottom-glow {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  opacity: 0.5;
  pointer-events: none;
}
.enhanced-input {
  background: rgba(255,255,255,0.85) !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px rgba(106, 130, 251, 0.08);
  transition: border 0.3s, box-shadow 0.3s;
}
.enhanced-input.is-focused {
  border: 2px solid #6a82fb !important;
  box-shadow: 0 0 12px #6a82fb33;
  background: #fff !important;
}
.enhanced-input.is-filled {
  box-shadow: 0 4px 16px #fc5c7d22;
}
.enhanced-send-btn {
  transition: transform 0.2s, box-shadow 0.2s;
}
.enhanced-send-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px #fc5c7d33;
}
.loading-spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
@media (max-width: 800px) {
  .enhanced-input-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 16px #6a82fb22;
    max-width: 100vw;
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
  .input-bottom-glow {
    left: 4vw;
    right: 4vw;
  }
}
.center-input-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .center-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 32px 0 32px 0;
  }
  .message-panel {
    margin-bottom: 32px;
    max-height: 45vh;
    min-height: 180px;
    overflow-y: auto;
  }
  .send-panel {
    margin: 0 auto;
    width: 100%;
    max-width: 700px;
    position: static;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.10), 0 2px 16px rgba(106, 130, 251, 0.08);
  }
}
@media (max-width: 800px) {
  .center-input-layout .center-content {
    padding: 8vw 0 8vw 0;
  }
  .center-input-layout .message-panel {
    margin-bottom: 18px;
    max-height: 36vh;
  }
  .center-input-layout .send-panel {
    max-width: 98vw;
    width: 98vw;
    padding-left: 2vw;
    padding-right: 2vw;
  }
}
@media (max-width: 600px) {
  .no-msg-img {
    width: 90vw;
    max-width: 98vw;
  }
}
</style>
